<template>
  <div class="tabbar-item" @click="itemCli()">
    <div v-if="!isActive"><slot name="item-img"></slot></div>
    <div v-else><slot name="item-img-active"></slot></div>
    <div :class="{ active: isActive }"><slot name="item-text"></slot></div>
    <!--插槽会把属性覆盖掉,记得用其他东西包起来-->
  </div>
</template>

<script>
export default {
  props: {
    path: String,
  },
  methods: {
    itemCli() {
      //$router相当于vue-router实例,包含所有的路由信息
      this.$router.push(this.path);
    },
  },
  computed: {
    isActive() {
      //$route相当于当前所访问的路由
      return this.$route.path.indexOf(this.path) != -1;
    },
  },
};
</script>

<style scoped>
.active {
  color: red;
}
</style>